<template>
  <div class="container">
    <div class="box-imgs-container">
      <div class="trapezoid-left" :style="{ backgroundImage: `url(${props.leftImageUrl})` }" />
      <div class="trapezoid-right" :style="{ backgroundImage: `url(${props.rightImageUrl})` }" />
    </div>
    <div class="bottom-shadow">{{ props.title }}</div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    default: "线稿生成",
  },
  leftImageUrl: {
    type: String,
    default:
      "https://images.ctfassets.net/hrltx12pl8hq/3E5SSUuJCKt1KyebMAdr7f/6b98ce27789b03a6b4a62092ea4566b6/Group_5_B.jpg?fit=fill&w=300&h=200",
  },
  rightImageUrl: {
    type: String,
    default:
      "https://images.ctfassets.net/hrltx12pl8hq/3E5SSUuJCKt1KyebMAdr7f/6b98ce27789b03a6b4a62092ea4566b6/Group_5_B.jpg?fit=fill&w=300&h=200",
  },
});
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 220rpx;
  height: 250rpx;
  overflow: hidden;
  border-radius: 4rpx;
  .bottom-shadow {
    width: 100%;
    height: 60rpx;
    font-size: 14px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
    background: #c13432;
  }
}

.trapezoid-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 144rpx;
  /* 梯形的宽度 */
  height: 200rpx;
  /* 背景图片居中 */
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 100%);
  /* 背景图片覆盖整个容器 */
  background-position: center;
  /* 梯形的高度 */
  //   background-image: url('https://images.ctfassets.net/hrltx12pl8hq/3E5SSUuJCKt1KyebMAdr7f/6b98ce27789b03a6b4a62092ea4566b6/Group_5_B.jpg?fit=fill&w=300&h=200');
  /* 图片路径 */
  background-size: cover;
  /* 创建梯形 */
}

.trapezoid-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 144rpx;
  /* 梯形的宽度 */
  height: 200rpx;
  /* 背景图片居中 */
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%);
  /* 背景图片覆盖整个容器 */
  background-position: center;
  /* 梯形的高度 */
  //   background-image: url('https://images.ctfassets.net/hrltx12pl8hq/3E5SSUuJCKt1KyebMAdr7f/6b98ce27789b03a6b4a62092ea4566b6/Group_5_B.jpg?fit=fill&w=300&h=200');
  //   /* 图片路径 */
  background-size: cover;
  /* 创建梯形 */
}

.box-imgs-container {
  position: relative;
  width: 220rpx;
  height: 200rpx;
}
</style>
